<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/banel.css">
    <link rel="stylesheet" href="./css/conten.css">
    <link rel="stylesheet" href="./css/detail.css">
</head>

<body>
    <div class="main hd d1">
        <!-- 导航栏区域 -->
        <nav class="bd">
            <ul class="">
                <li>小米商城</li>|
                <li>MIUI</li>|
                <li>loT</li>|
                <li>云服务</li>|
                <li>金融</li>|
                <li>有品</li>|
                <li>小爱开放品台</li>|
                <li>企业团购</li>

            </ul>
            <div class="side">
                <span class="spn2">登录</span>
                <span class="spn1">注册</span>
                <span> <img src="./image/购物车.png" alt=""> 购物车</span>
            </div>
        </nav>
        <!-- logo和搜索模块 -->
        <div class="bd title">
            <div class="title_hd"><img src="./image/m.png" alt=""></div>
            <div class="title_bd">
                <span>小米手机</span>
                <span>Redmi红米</span>
                <span>电视</span>
                <span>笔记本</span>
                <span>家电</span>
                <span>路由器</span>
                <span>智能硬件</span>
                <span>服务</span>
                <span>社区</span>
            </div>
            <div class="title_fd">
                <input type="text" placeholder="小米mini">
                <button>搜索</button>
            </div>
        </div>
        <!-- 滑动固定区域 -->
        <div class="wd">
            <div class="roll w1">
                <div class="roll_hd">
                    <a href="">小米CC9 Pro</a><span></span>
                    <a href="">小米CC9</a><span></span>
                    <a href="">小米CC9 美图定制版</a>
                </div>
                <div class="roll_bd">
                    <a href="">概述</a><span></span>
                    <a href="">参数</a><span></span>
                    <a href="">F码通道</a><span></span>
                    <a href="">用户评价</a>
                </div>
            </div>
        </div>
        <div class="wd ws">
            <div class="roll w1">
                <div class="roll_hd">
                    <a href="">小米CC9 Pro</a><span></span>
                    <a href="">小米CC9</a><span></span>
                    <a href="">小米CC9 美图定制版</a>
                </div>
                <div class="roll_bd">
                    <a href="">概述</a><span></span>
                    <a href="">参数</a><span></span>
                    <a href="">F码通道</a><span></span>
                    <a href="">用户评价</a>
                </div>
            </div>
        </div>
        <div class="title_login">为方便您购买,请提前登录
            <a href="">立即登录</a>
            <img src="./image/121xx.png" alt="" id="detail">
        </div>
        <!-- 详细信息区域 -->
        <div class="detail_main bd">
            <!-- <div class="detail_d"> -->
            <!-- 左侧轮播图 -->
            <div class="detail_main_hd" id="detail_main_hd">
                <div class="mask">

                </div>
                <img src="./image/q1.jpg" alt="" id="img">
            </div>
            <!-- 左侧放大镜图片 -->
            <div class="detail_main_hd2">
                <img src="./image/q1.jpg" alt="" id="img2">
            </div>
            <!-- </div> -->
            <!-- 右侧详情 -->
            <div class="detail_main_bd">
                <h2>小米CC9 Pro</h2>
                <p>
                    <span>「分期享12期免息，购机享1TB小米云空间1年使用权，赠简约条纹保护壳」</span> 1亿像素主摄 / 全场景五摄像头 / 四闪光灯 / 3200万自拍 / 10 倍混合光学变焦，50倍数字变焦 / 5260mAh ⼤电量 / 标配 30W疾速快充 / ⼩米⾸款超薄屏下指纹 / 德国莱茵低蓝光认证 / 多功能NFC / 红外万能遥控 / 1216超线性扬声器
                </p>
                <div class="t1">小米自营</div>
                <div class="t2">
                    <span>2999元</span><del>3444元</del>
                </div>
                <div class="t3">
                    <span>赠完为止</span><span>赠小米CC9Pro保护壳二选一</span>
                </div>
                <div class="t4">
                    <img src="./image/定位.png" alt="">
                    <span>北京&nbsp;&nbsp;北京市&nbsp;&nbsp;东城区&nbsp;&nbsp;安定门街道&nbsp;&nbsp;<a href="">修改</a></br><a href="">有现货</a></span>
                </div>
                <div class="t5">
                    <h2>选择版本</h2>
                    <div class="t5_spn" id="t5sp">
                        <!-- <span class="sn"><a href="javascript:;">8GB+128GB</a><a href="javascript:;">2799元</a> </span>
                        <span class=""><a href="javascript:;">6GB+128GB</a><a href="javascript:;">2599元</a></span>
                        <span><a href="javascript:;">8GB+256GB</a><a href="javascript:;">3199元</a></span> -->
                    </div>
                </div>
                <div class="t6">
                    <h2>选择颜色</h2>
                    <div class="t5_spn" id="spn1">
                        <span class="sn"><a href="javascript:;"><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1572941094.42616676.jpg" alt=""> 魔法滤镜</a> </span>
                        <span><a href="javascript:;"> <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1572941153.13961550.jpg" alt=""> 冰雪极光</a></span>
                        <!-- <span><a href="">8GB+256GB</a><a href="">3199元</a></span> -->
                    </div>
                </div>
                <div class="t5">
                    <h2>选择套餐</h2>
                    <div class="t5_spn" id="spn2">
                        <!-- <span class="sn"><a href="javascript:;">标配</a> </span>
                        <span><a href="javascript:;">+39元得条纹保护壳</a></span>
                        <span><a href="javascript:;">+69元得撞色飘带保护壳</a></span> -->
                    </div>
                </div>
                <div class="t8 ">
                    <div class="t8_hd">
                        <h2>选择小米提供的意外保护</h2>
                        <a href="">了解意外保护</a>
                    </div>
                    <!-- <div class="t8_md">
                        <div class="t8_md_t">
                            <input type="checkbox" value="√">
                        </div>
                        <div class="t8_md_y">
                            <img src="./image/bao.png" alt="">
                        </div>
                        <div class="t8_md_u">
                            <h2>意外保障服务</h2>
                            <span class="t8_md_u1"> 手机意外碎屏/进水/碾压等损坏</span>
                            <div class="t8_md_u2">
                                <input type="checkbox" value="√">
                                <a href="javascript:;" class="a1">我已阅读</a>
                                <a href="">服务条款</a>
                                <span></span>
                                <a href="">常见问题</a>
                            </div>
                        </div>
                        <div class="t8_md_i">
                            <span>349元</span>
                        </div>
                    </div> -->
                    <div class="t8_md ts t2" id="td2">
                        <div class="t8_md_t">
                            <input type="checkbox" value="√">
                        </div>
                        <div class="t8_md_y">
                            <img src="./image/bao.png" alt="">
                        </div>
                        <div class="t8_md_u">
                            <h2>意外保障服务</h2>
                            <span class="t8_md_u1"> 手机意外碎屏/进水/碾压等损坏</span>
                            <div class="t8_md_u2">
                                <input type="checkbox" value="√">
                                <a href="javascript:;" class="a1">我已阅读</a>
                                <a href="">服务条款</a>
                                <span></span>
                                <a href="">常见问题</a>
                            </div>
                        </div>
                        <div class="t8_md_i">
                            <span>349元</span>
                        </div>
                    </div>
                </div>
                <div class="t8">
                    <div class="t8_hd">
                        <h2>选择小米提供的延长保修</h2>
                        <a href="">了解意外保护</a>
                    </div>
                    <div class="t8_md ts" id="tds">
                        <div class="t8_md_t">
                            <input type="checkbox" value="√">
                        </div>
                        <div class="t8_md_y">
                            <img src="./image/bao.png" alt="">
                        </div>
                        <div class="t8_md_u">
                            <h2>延长保修服务</h2>
                            <span class="t8_md_u1"> 厂延保一年,性能故障免费维修</span>
                            <div class="t8_md_u2">
                                <input type="checkbox" value="√">
                                <a href="javascript:;" class="a1">我已阅读</a>
                                <a href="">服务条款</a>
                                <span></span>
                                <a href="">常见问题</a>
                            </div>
                        </div>
                        <div class="t8_md_i">
                            <span>159元</span>
                        </div>
                    </div>

                </div>
                <div class="t8">
                    <div class="t8_hd">
                        <h2>选择小米提供的云空间服务</h2>
                        <a href="">了解云空间服务</a>
                    </div>
                    <div class="t8_md ts" id="md">
                        <div class="t8_md_t">
                            <input type="checkbox" value="√">
                        </div>
                        <div class="t8_md_y">
                            <img src="./image/bao.png" alt="">
                        </div>
                        <div class="t8_md_u">
                            <h2>云空间月卡 50G</h2>
                            <span class="t8_md_u1"> 小米云空间扩容,专享更大小米云空间</span>
                            <div class="t8_md_u2">
                                <input type="checkbox" value="true">
                                <a href="javascript:;" class="a1">我已阅读</a>
                                <a href="">服务条款</a>
                                <span></span>
                                <a href="">常见问题</a>
                            </div>
                        </div>
                        <div class="t8_md_i">
                            <span>9元</span>
                        </div>
                    </div>

                </div>
                <div class="t7">
                    <div class="t7_hd">
                        <div class="t7_hd_m">小米CC9 Pro 8GB+128GB 魔法绿境 </div>
                        <div class="t7_hd_h">2799 元 &nbsp;<del>3099元</del></div>
                    </div>
                    <h1 id='h1'>总计&nbsp;&nbsp;: 2799元</h1>
                </div>
                <div class="t9">
                    <a href="" class="t9_hd">加入购物车</a>
                    <a href="" class="t9_bd"><img src="./image/心.png" alt=""> 喜欢</a>
                </div>
                <div class="t10">
                    <a href=""><img src="./image/对勾.png" alt="">小米自营</a>
                    <a href=""><img src="./image/对勾.png" alt="">小米发货</a>
                    <a href=""><img src="./image/对勾.png" alt="">7天无理由退货</a>
                    <a href=""><img src="./image/对勾.png" alt="">运费说明</a>
                    <a href=""><img src="./image/对勾.png" alt="">企业信息</a>
                    </br>
                    <!-- <a href=""><img src="./image/对勾.png" alt="">7天价格保护</a> -->
                </div>
            </div>
        </div>
        <div class="blog2">
            <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/db461be6e96ca37f36addee3d838cd78.jpg" alt="">
        </div>
        <div class="blo">
            <img src="./img/banel.jpg" alt="">
            <img src="./img/banel2.jpg" alt="">
            <img src="./img/banel3.jpg" alt="">
            <img src="./img/banel1.jpg" alt="">
            <img src="./img/627.jpg" alt="">
            <img src="./img/741.jpg" alt="">
            <img src="./img/850.jpg" alt="">
            <img src="./img/1040.jpg" alt="">
        </div>
        <div class="blog bd">
            <h1>官方微信</h1>
            <img src="./image/wei.jpg" alt="">
        </div>
        <div class="blog1 bd">
            <h1>价格说明</h1>
            <img src="./image/lian.jpeg" alt="">
        </div>
        <!-- 底部区域 -->
        <footer class="footer_hd hd">
            <div class="footer_bd bd">
                <div class="footer_td">
                    <a href="#"><img src="./image/工具.png" alt="">预约维修服务</a>
                    <a href="#"><img src="./image/7天无理由退货.png" alt="">7天无理由退货</a>
                    <a href="#"><img src="./image/15天无理由退货.png" alt="">15天免费换货</a>
                    <a href="#"><img src="./image/礼盒.png" alt="">满99元包邮</a>
                    <a href="#"><img src="./image/定位.png" alt="">520余家售后网点</a>
                </div>
                <div class="footer_dt">
                    <dl>
                        <dt>
                            帮助中心
                        </dt>
                        <dd>账户管理</dd>
                        <dd>购物指南</dd>
                        <dd>订单操作</dd>
                    </dl>
                    <dl>
                        <dt>
                           服务支持
                        </dt>
                        <dd>售后政策</dd>
                        <dd>自助服务</dd>
                        <dd>相关下载</dd>
                    </dl>
                    <dl>
                        <dt>
                           线下门店
                        </dt>
                        <dd>小米之家</dd>
                        <dd>服务网点</dd>
                        <dd>授权体验店</dd>
                    </dl>
                    <dl>
                        <dt>
                           关于小米
                        </dt>
                        <dd>了解小米</dd>
                        <dd>加入小米</dd>
                        <dd>投资者关系</dd>
                    </dl>
                    <dl>
                        <dt>
                           关注我们
                        </dt>
                        <dd>新浪微博</dd>
                        <dd>官方微信</dd>
                        <dd>联系我们</dd>
                    </dl>
                    <dl>
                        <dt>
                           特色服务
                        </dt>
                        <dd>F 码通道</dd>
                        <dd>礼物码</dd>
                        <dd>防伪查询</dd>
                    </dl>
                    <div class="footer_dt_dl">
                        <h3>400-100-5678</h3>
                        <p>周一至周日8:00-18:00</p>
                        <span>(仅收市话费)</span>
                        <a href="#">
                            <img src="./image/消息.png" alt=""> 人工客服
                        </a>
                    </div>
                </div>
                <div class="footer_ft">
                    <div class="footer_logo">
                        <img src="./image/m.png" alt="">
                    </div>
                    <div class="footer_fd">
                        <p>
                            <a href="">小米商城</a>|
                            <a href="">MIUI</a>|
                            <a href="">米家</a>|
                            <a href="">米聊</a>|
                            <a href="">多看</a>|
                            <a href="">游戏</a>|
                            <a href="">政企服务</a>|
                            <a href="">小米天猫店</a>|
                            <a href="">小米集团隐私政策</a>|
                            <a href="">小米公司儿童信息保护规则</a>|
                            <a href="">小米商城隐私政策</a>|
                            <a href="">小米商城用户协议</a>|
                            <a href="">问题反馈</a>|
                            <a href="">廉正举报</a>|
                            <a href="">诚信合规</a>|
                            <a href="">Select Location</a>
                        </p>
                        <p>
                            <a href="">© mi.com 京ICP证110507号</a>
                            <a href="">京ICP备10046444号</a>
                            <a href="">京公网安备11010802020134号</a>
                            <a href="">京网文[2020]0276-042号</a>
                        </p>
                        <p>
                            <a href="">（京）网械平台备字（2018）第00005号</a>
                            <a href="">互联网药品信息服务资格证 (京)-非经营性-2014-0090</a>
                            <a href="">营业执照</a>
                            <a href="">医疗器械质量公告</a>
                        </p>
                        <p>
                            <a href="">增值电信业务许可证</a> 网络食品经营备案（京）【2018】WLSPJYBAHF-12
                            <a href="">食品经营许可证</a>
                        </p>
                        <p>
                            违法和不良信息举报电话：185-0130-1238
                            <a href="">知识产权侵权投诉</a> 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
                        </p>
                        <div class="footer_tl">
                            <a href="">
                                <img src="./image/f1.png" alt="">
                            </a>
                            <a href="">
                                <img src="./image/f2.png" alt="">
                            </a>
                            <a href="">
                                <img src="./image/f3.png" alt="">
                            </a>
                            <a href="">
                                <img src="./image/f4png.png" alt="">
                            </a>
                        </div>
                        <div class="footer_lg">探索黑科技,小米为发烧而生！</div>
                    </div>
                </div>
            </div>
        </footer>
    </div>
</body>
<script src="./js/detail.js"></script>

</html>